<!-- 面包屑 -->
<template>
    <!-- 菜单隐藏 显示按钮 -->
    <el-icon @click="changeIcon">
        <!-- 动态加载渲染组件 fold为真 显示折叠图标 否则显示展开图标 Expand-->
        <component :is="settingStore.fold?'Fold':'Expand'"></component>
    </el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb separator-icon="ArrowRight" class="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" v-show="item.meta.title" :to="item.path">
            {{ item.meta.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup lang="ts">
import useSettingStore from '../../../../store/modules/setting'
import { useRoute } from 'vue-router'
let settingStore = useSettingStore()
let $route = useRoute()
// 改变图标 菜单显示与折叠
const changeIcon = () => {
    settingStore.fold = !settingStore.fold
}
</script>

<style lang="scss" scoped>
.el-icon:hover {
    cursor: pointer;
}

.breadcrumb {
    padding-left: 10px;
}
</style>